<template>
	<div class='finance_table'>
		<el-button v-if="!financeVisi.visibled" style="margin-left:10px" icon="plus" type='primary'  @click="dialogVisible = true"> 申请发票 </el-button>
		<span @click="invoiceSet" v-if="!financeVisi.visibled">发票信息设置</span>
		<!--申请发票-->
		<el-dialog title="申请发票" :visible.sync="dialogVisible" v-if="!financeVisi.visibled">
			<div>
				<span>发票内容</span>
				<el-input v-model="invoiceApplyObj.content" placeholder="请输入"></el-input>
			</div>
			<span>请选择开发票订单</span>
			<div class="resize-scroll">
				<el-checkbox-group v-model="checkList" v-for="inic in invoiceLists" :key="inic.id">
					<el-checkbox :label="inic.id">
						<div >{{inic.serial_number}}</div>服务费：{{inic.ship_price | conver_money}}
					</el-checkbox>
				</el-checkbox-group>
			</div>
			<span slot="footer" class="dialog-footer">
		    		<el-button  @click="dialogVisible = false">取 消</el-button>
		    		<el-button type="primary" @click="applyInvoice">确 定</el-button>
		  	</span>
		</el-dialog>
		<!--<el-select v-model="value1" v-if="financeVisi.visibled" placeholder="请选择">
			<el-option v-for="item in invoice" :key="item.key" :label="item.value" :value="item.key">
			</el-option>
		</el-select>-->
		<el-date-picker v-if="financeVisi.visibled" style="margin-left:10px" v-model="value" type="daterange" align="right" :picker-options="pickerOptions2" @onPick='handleSearch' placeholder="选择日期范围"></el-date-picker>

		<el-button style="margin-left:10px" type='primary' @click="handleSearch" v-if="financeVisi.visibled"> 查询</el-button>
		<el-button type='primary' v-if="financeVisi.visibled"> 导出</el-button>
	</div>
</template>
<script>
	import {conver_money } from '@/utils/filters'
	import { mapActions, mapState, mapGetters } from 'vuex'
	import { getUser } from '@/utils/auth.js'
	const invoice = [{
		key: 'audit',
		value: '待处理'
	}, {
		key: 'complete',
		value: '已开票'
	}, {
		key: 'ship',
		value: '已寄出'
	}]
	export default {
		data() {
			return {
				dialogVisible: false,
				value: "",
				value1: "",
				page: { next_page: 1 },
				limit: 1,
				invoice: invoice,
				pickerOptions2: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				invoiceApplyObj: {
					company_name: "",
					content: "",
					invoice_type: "",
					order_id: "",
					user_invoice_id: ""
				},
				myInvoiceArr: {},
				invoiceLists: [],
				checkList:[]
			}
		},
		computed: {
			...mapGetters([
				'payments', 'financePage', 'financeVisi', 'current_user'
			])
		},
		created() {

		},
		mounted() {
			this.invoiceList()
			this.myInvoice()
			
		},
		methods: {
			...mapActions(['getFinance', 'getInvoice']),
			handleSearch(e, i) {
				let _this = this;
				let _start = new Date(this.value[0]).getTime();
				let _end = new Date(this.value[1]).getTime();
				if(this.financeVisi.visibled) {
					this.getFinance({ kind: this.activeName1, page: this.page.next_page, start: _start / 1000, end: _end / 1000, limit: 10 })
				} else {
					this.getInvoice({ id: getUser().id, invoice_type: this.value1, kind: this.activeName1, page: this.page.next_page, start: _start / 1000, end: _end / 1000, limit: 10 })
				}
			},
			invoiceSet() {
				this.$router.push({ name: 'invoiceSet' })
			},
			//获取发票信息
			myInvoice() {
				this.$http.get("users/" + this.current_user.id + "/user_invoices").then(res => {
					this.myInvoiceArr = res.user_invoices[0]
				})
			},
			//获取开票订单
			invoiceList() {
				this.$http.get("users/" + this.current_user.id + "/fetch_invoice_orders").then(res => {
					this.invoiceLists = res.order
				})
			},
			//申请发票
			applyInvoice() {
				this.dialogVisible = false
				this.invoiceApplyObj.company_name = this.myInvoiceArr.name
				this.invoiceApplyObj.user_invoice_id = this.myInvoiceArr.id
				this.invoiceApplyObj.invoice_type = this.myInvoiceArr.invoice_type
				this.invoiceApplyObj.order_id = this.checkList
				this.$http.post("users/" + this.current_user.id + "/add_invoice", this.invoiceApplyObj).then(res => {})
			}
		}
	}
</script>
<!--<style lang='scss' scoped>
	.resize-scroll {
		height: 500px;
		overflow-y: auto;
		height: 100px;
		border: 1px solid #ffffff;
	}
</style>-->
